<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="max.css">
		<title>放大镜</title>
	</head>
	<body>
		<div class="box">
			<img src="./img/hezi.jpg" alt="渺小一生" />
			<div class="block"></div>
		</div>

		<div class="max">
			<img class="bImg" src="./img/max.jpg" alt="max" />
		</div>

		<script>
			/* onmouseenter
			   onmouseleave
			   
			   onmousemove=function(ev){
				   ev,事件对象上存储有鼠标的位置信息
			} */

			var a = document.querySelector(".box");
			var b = document.querySelector(".max");
			var c = document.querySelector(".block")
			var d = document.querySelector(".max img")


			a.onmouseleave = function() {
				c.style.display = "none"
				b.style.display = "none"
			}



			a.addEventListener("mousemove", function(ev) {
				//移入意味着鼠标以及移入了
				c.style.display = "block";
				b.style.display = "block";
				
				
				var tx = ev.clientX;
				var ty = ev.clientY;
				//left1 是给放大镜的偏移量, 鼠标相对可视化界面的偏移量-左侧盒子相对可视化界面的偏移量-放大镜宽度的一半
				var left1 = tx - a.getBoundingClientRect().left - c.getBoundingClientRect().width/2;
				var top1 = ty - a.getBoundingClientRect().top - c.getBoundingClientRect().height/2;
				
				//放大镜最小偏移量临界值
				if (left1 < 0) {
					left1 = 0;
				}
				if (top1 < 0) {
					top1 = 0
				}
				//放大镜最大偏移量临界值
				if (left1 > a.getBoundingClientRect().width-c.getBoundingClientRect().width) {
					left1 = a.getBoundingClientRect().width-c.getBoundingClientRect().width
				}
				if (top1 > a.getBoundingClientRect().height-c.getBoundingClientRect().height) {
					top1 = a.getBoundingClientRect().height-c.getBoundingClientRect().height
				}

				c.style.left = left1 + "px"
				c.style.top = top1 + "px"
				d.style.left = -left1*(d.getBoundingClientRect().width/a.getBoundingClientRect().width) + "px"
				d.style.top = -top1*((d.getBoundingClientRect().height/a.getBoundingClientRect().height)) + "px"

			})





			/* onmouseenter//鼠标进入
	       onmouseleave//鼠标离开
		   
	       
	       
	       
	       
	       
	       onmousemove=function(ev){
	           ev,事件对象上存储有鼠标的位置信息
	    } */
		</script>
	</body>
</html>
